<template>
	<view class="personal-attention">
		<view v-if="concernList.length">
			<view
			class="attention-item"
			v-for="(concern,index) in concernList"
			:key="index"
			@click.stop="handleToUserCenter(concern.userInfo)"
			>
				<view class="attention-info">
					<view class="user-avatar">
						<u-image width="60" height="60" :src="concern.userInfo.avatarUrl || defaultAvatar"></u-image>
					</view>
					<view class="user-name">{{ concern.userInfo.nickName }}</view>
				</view>
				<view class="right-icon" @click.stop="handleConcern(concern)">
					<text class="iconfont" :class="concern.userConcern ? 'icon-yiguanzhu' : 'icon-weiguanzhu'"></text>
				</view>
			</view>
			<!-- 加载完 -->
			<!-- <view v-show="pagination.totalCount >= concernList.length" class="finished-loading">
				<u-divider>我是有底线的 凸^-^凸</u-divider>
			</view> -->
		</view>
		<view v-else>
			<u-empty text="您还没有关注其他人" icon-size="152" font-size="40" margin-top="100" class="empty"></u-empty>
		</view>
		
		<!-- 登录弹窗 -->
		<u-popup v-model="showLoginDialog" mode="center" width="500rpx">
			<view class="popup-wrapper">
				<view class="tip">
					<view>您凭证已过期或未登录</view>
					<view>请登录</view>
				</view>
				<u-button type="primary" :loading="isLogin" open-type="getUserInfo" @getuserinfo="handleLogin">登录</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { getConcernList, concern } from '@/api/user.js'
	import loginMixin from '@/utils/loginMixin.js'
	
	export default {
		mixins:[loginMixin],
		
		data() {
			return {
				showLoginDialog: false, // 显示登录弹窗
				defaultAvatar: require('@/static/user/default-avatar.png'),
				flag: 'mine', // mine：我的  ta：ta的
				concernList: [], // 关注列表
				pagination: { // 分页参数
					totalCount: 0,
					startIndex: 0,
					size: 15
				}
			}
		},
		
		onLoad(options) {
			this.openId = options.openId
			this.flag = options.flag
			if (options.flag === 'mine') {
				uni.setNavigationBarTitle({
					title: '吃鲸目标 - 我的关注'
				})
			} else {
				uni.setNavigationBarTitle({
					title: '吃鲸目标 - Ta的关注'
				})
			}
			this.init()
		},
		
		// 上拉加载
		onReachBottom() {
			if (this.pagination.totalCount >= this.concernList.length) return
			this.pagination.startIndex += 1
			this.handlegetConcernList()
		},
		
		methods:{
			init() {
				this.concernList = []
				this.pagination.startIndex = 0
				this.handlegetConcernList()
			},
			
			// 跳转用户中心
			handleToUserCenter(userInfo) {
				// 点击的是自己的信息跳转个人中心
				if (this.user.openId === userInfo.openId) {
					uni.switchTab({
						url: '/pages/mine/index'
					})
				} else {
					uni.navigateTo({
						url: `/pages/insidePages/userCenter/index?flag=ta&openId=${userInfo.openId}&nickName=${userInfo.nickName}&avatarUrl=${userInfo.avatarUrl}`
					})
				}
			},
			
			// 获取列表
			async handlegetConcernList() {
				const token = uni.getStorageSync('token')
				if (!token || !this.openId) return
				const data = JSON.stringify({
					openId: this.openId,
					startIndex: this.pagination.startIndex,
					length: this.pagination.size
				})
				try{
					const { resultData } = await getConcernList({ data })
					const resData = resultData.list.map(item => ({
						...item,
						userConcern: true
					}))
					this.concernList = [...this.concernList, ...resData]
					this.pagination.totalCount = resultData.totalCount
				}catch(e){
					//TODO handle the exception
					if (e.resultCode === 701) {
						this.showLoginDialog = true
					}
				}
			},
			
			// 关注、取消关注
			async handleConcern(target) {
				console.log(target)
				// 没有登录
				if (!this.user.hasOwnProperty('openId')) {
					this.showLoginDialog = true
					return
				}
			
				const data = JSON.stringify({
					openId: this.user.openId,
					concernOpenId: target.userInfo.openId
				})
				try {
					const res = await concern({
						data
					})
					uni.showToast({
						title: res.resultMsg,
						icon: "none"
					})
					target.userConcern = !target.userConcern
				} catch (e) {
					uni.showToast({
						title: e.resultMsg,
						icon: "none"
					})
			
				}
			},
		}
	}
</script>

<style lang="scss">
	.attention-item {
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid #ddd;
		padding: 24rpx 40rpx;

		.attention-info {
			display: flex;
			align-items: center;

			.user-avatar {
				margin-right: 12rpx;
			}

			.user-name {
				font-size: 28rpx;
			}
		}
		
		.right-icon {
			.iconfont {
				font-size: 40rpx;
			}
			
		}
	}
	
	.finished-loading {
		margin-top: 40rpx;
		padding-bottom: 40rpx;
	}
	
	.popup-wrapper {
		padding: 24rpx 24rpx 40rpx;
		text-align: center;
	
		.tip {
			padding: 50rpx 0;
		}
	}
</style>
